<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>客户装箱单</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-form layout="inline">
        <a-form-item label="客户名称">
          <a-input v-model="form.custNameLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="客户联系人">
          <a-input v-model="form.linkManLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="所属部门">
          <a-tree-select
            class="selectInputWidth"
            v-model="form.deptId"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :load-data="onLoadData"
            :tree-data="deptTreeData"
            placeholder="请选择"
            @change="onChangeTree"
          ></a-tree-select>
        </a-form-item>
        <a-form-item label="所属销售">
          <a-select v-model="form.sellerId" class="selectInputWidth">
            <a-select-option v-for="v in sellers" :key="v.uiId">
              {{
              v.name
              }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="装箱地址">
          <a-input v-model="form.consignorAddressLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="送货地址">
          <a-input v-model="form.consigneeAddressLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="船公司">
          <a-input v-model="form.holderLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="驳船船名航次">
          <a-input v-model="form.voyageLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="海船船名航次">
          <a-input v-model="form.seagoingVoyageLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item>
          <a-input-group compact>
            <a-select v-model="form.dateSearchType" style="width: 110px">
              <a-select-option :value="1">装货日期</a-select-option>
              <a-select-option :value="2">驳船启航日期</a-select-option>
              <a-select-option :value="3">海船启航日期</a-select-option>
              <a-select-option :value="4">抵达目的港日期</a-select-option>
              <a-select-option :value="5">送货日期</a-select-option>
              <a-select-option :value="6">付款日期</a-select-option>
            </a-select>
            <a-range-picker
              v-if="form.dateSearchType === 1"
              @change="onChange"
              :show-time="{ format: 'HH:mm' }"
              format="YYYY-MM-DD HH:mm"
              style="width: 300px"
              :value="createValue"
            >
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
            <a-range-picker v-else @change="onChange" :value="createValue" style="width: 300px">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-input-group>
        </a-form-item>
        <a-form-item label="公司编号、箱号、运单号">
          <a-input v-model="form.codeLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="货名" prop="goodsName">
          <a-input v-model="form.goodsName" class="selectInputWidth" />
          <!-- <a-select
            show-search
            :show-arrow="false"
            :filter-option="false"
            :default-active-first-option="false"
            :not-found-content="null"
            v-model="form.goodsName"
            @search="goodsListChange"
            @select="goodsSelect"
            style="width: 120px"
          >
            <a-select-option key>请选择</a-select-option>
            <a-select-option v-for="d in goodsList" :key="d.name">{{
              d.name
            }}</a-select-option>
          </a-select>-->
        </a-form-item>
        <a-form-item label="箱型">
          <a-select v-model="form.containerTypeId" style="width: 120px">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item, index) in containerList"
              :key="index"
              :value="item.id"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="起运港">
          <a-input v-model="form.startPortLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item label="目的港">
          <a-input v-model="form.endPortLike" class="selectInputWidth" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="tableData"
        class="tableMargin"
        :pagination="pagination"
        :scroll="{ x: 4500 }"
        :row-key="(record, index) => index"
      >
        <template slot="rn" slot-scope="text, record, index">
          {{
          index + 1
          }}
        </template>
        <template slot="company" slot-scope="text, record">
          <a v-if="record.shipOrderCode" @click="orderDetail(record)">
            {{
            record.shipOrderCode
            }}
          </a>
          <span v-else>--</span>
        </template>
        <template slot="amount" slot-scope="text, record">
          <span v-if="record.currencyType === 'CNY'">
            {{
            record.amount.toFixed(2)
            }}
          </span>
          <span v-else style="color: orange">${{ record.amount.toFixed(2) }}</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import _ from 'lodash/debounce'
import { commonExport } from '@/api/request'
import { querySellerDown, queryDeptDown } from '@/api'
import { queryGoodsData, queryCustPackingList } from '@/api/salesCenter'
import { queryContainerTypeList } from '@/api/boxManagementCenter'
const deptData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL'
}
const sellerData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL',
  status: 1
}
const defaultForm = () => ({
  deptId: '', // 所属部门id
  sellerId: '', // 销售id
  custNameLike: '', // 客户名称
  codeLike: '', // 公司编号、箱号、运单号
  linkManLike: '', // 联系人
  consignorAddressLike: '', // 装箱地址
  consigneeAddressLike: '', // 送货地址
  holderLike: '', // 船公司
  voyageLike: '', // 驳船船名航次
  seagoingVoyageLike: '', // 海船船名航次
  startPortLike: '', // 起运港
  endPortLike: '', // 目的港
  dateSearchType: 1, // 1、装货日期 2、驳船启航日期 3.海船启航日期 4.驳船抵达日期 5.送货日期 6.付款日期
  startDate: '', // 开始时间
  endDate: '', // 结束时间
  containerTypeId: '', // 箱型ID
  goodsName: '' // 货名
})
const columns = [
  {
    title: '序号',
    width: 60,
    scopedSlots: { customRender: 'rn' }
  },
  {
    title: '所属销售',
    dataIndex: 'seller',
    customRender: (text, record, index) => {
      return record.seller || '--'
    }
  },
  {
    title: '所属部门',
    dataIndex: 'department',
    customRender: (text, record, index) => {
      return record.department || '--'
    }
  },
  {
    title: '装货日期',
    dataIndex: 'loadingTime',
    customRender: (text, record, index) => {
      return record.loadingTime || '--'
    }
  },
  {
    title: '客户名称',
    dataIndex: 'custName',
    customRender: (text, record, index) => {
      return record.custName || '--'
    }
  },
  {
    title: '客户联系人',
    dataIndex: 'linkMan',
    customRender: (text, record, index) => {
      return record.linkMan || '--'
    }
  },
  {
    title: '装箱地址',
    dataIndex: 'consignorAddress',
    width: 200,
    ellipsis: true,
    customRender: (text, record, index) => {
      return record.consignorAddress || '--'
    }
  },
  {
    title: '装箱联系人',
    dataIndex: 'consignor',
    customRender: (text, record, index) => {
      return record.consignor || '--'
    }
  },
  {
    title: '装箱联系电话',
    dataIndex: 'consignorPhone',
    customRender: (text, record, index) => {
      return record.consignorPhone || '--'
    }
  },
  {
    title: '货名',
    dataIndex: 'goodsName',
    customRender: (text, record, index) => {
      return record.goodsName || '--'
    }
  },
  {
    title: '箱型',
    dataIndex: 'containerType',
    customRender: (text, record, index) => {
      return record.containerType || '--'
    }
  },
  {
    title: '船公司',
    dataIndex: 'holder',
    customRender: (text, record, index) => {
      return record.holder || '--'
    }
  },
  {
    title: '运输条款',
    dataIndex: 'transportTerms',
    customRender: (text, record, index) => {
      return record.transportTerms || '--'
    }
  },
  {
    title: '始发港',
    dataIndex: 'startPort',
    customRender: (text, record, index) => {
      return record.startPort || '--'
    }
  },
  {
    title: '目的港',
    dataIndex: 'endPort',
    customRender: (text, record, index) => {
      return record.endPort || '--'
    }
  },
  {
    title: '送货地址',
    dataIndex: 'consigneeAddress',
    width: 200,
    ellipsis: true,
    customRender: (text, record, index) => {
      return record.consigneeAddress || '--'
    }
  },
  {
    title: '送货联系人',
    dataIndex: 'consignee',
    customRender: (text, record, index) => {
      return record.consignee || '--'
    }
  },
  {
    title: '送货联系电话',
    dataIndex: 'consigneePhone',
    customRender: (text, record, index) => {
      return record.consigneePhone || '--'
    }
  },
  {
    title: '驳船船名航次',
    dataIndex: 'voyage',
    customRender: (text, record, index) => {
      return record.voyage || '--'
    }
  },
  {
    title: '驳船起航日期',
    dataIndex: 'departureDate',
    customRender: (text, record, index) => {
      return record.departureDate || '--'
    }
  },
  {
    title: '海船船名航次',
    dataIndex: 'seagoingVoyage',
    customRender: (text, record, index) => {
      return record.seagoingVoyage || '--'
    }
  },
  {
    title: '海船起航日期',
    dataIndex: 'seagoingDepartureDate',
    customRender: (text, record, index) => {
      return record.seagoingDepartureDate || '--'
    }
  },
  {
    title: '公司编号',
    dataIndex: 'shipOrderCode',
    scopedSlots: {
      customRender: 'company'
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo',
    customRender: (text, record, index) => {
      return record.containerNo || '--'
    }
  },
  {
    title: '封号',
    dataIndex: 'containerSealNo',
    customRender: (text, record, index) => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '运单号',
    dataIndex: 'seagoingShipOrderCode',
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '抵达目的港日期',
    dataIndex: 'shipArrivalDate',
    customRender: (text, record, index) => {
      return record.shipArrivalDate || '--'
    }
  },
  {
    title: '送货车队',
    dataIndex: 'motorcade',
    customRender: (text, record, index) => {
      return record.motorcade || '--'
    }
  },
  {
    title: '送货日期',
    dataIndex: 'completeTime',
    customRender: (text, record, index) => {
      return record.completeTime || '--'
    }
  },
  {
    title: '付款日期',
    dataIndex: 'writeOffDate',
    customRender: (text, record, index) => {
      return record.writeOffDate || '--'
    }
  },
  {
    title: '应收客户金额',
    dataIndex: 'amount',
    scopedSlots: {
      customRender: 'amount'
    }
  }
]
export default {
  data () {
    this.goodsListChange = _(this.goodsListChange, 800)
    return {
      isFirstEnd: true,
      form: {
        ...defaultForm()
      },
      pageNum: 1,
      pageSize: 10,
      deptTreeData: [],
      sellers: [],
      goodsList: [],
      containerList: [],
      createValue: [],
      loading: true,
      columns,
      tableData: [],
      pagination: {}
    }
  },
  methods: {
    onLoadData (treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          (rsp) => {
            let childrenData = []
            rsp.data.forEach((value) => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      return new Promise((resolve) => {
        queryDeptDown(e).then((rsp) => {
          let initData = []
          rsp.data.forEach((value, index) => {
            initData.push({
              title: value.name,
              key: value.deptId,
              value: value.deptId
            })
          })
          this.deptTreeData = initData
          this.form.deptId = rsp.data[0].deptId
          if (this.isFirstEnd) {
            resolve(this.form.deptId)
          }
        })
      })
    },
    onChangeTree (value) {
      this.initSellerDown(value)
    },
    initSellerDown (deptId) {
      return new Promise((resolve) => {
        querySellerDown({ ...sellerData, deptId }).then((rsp) => {
          this.sellers = rsp.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
          this.form.sellerId = rsp.data[0].uiId
          if (this.isFirstEnd) {
            resolve(this.form.sellerId)
            // // console.log(rsp.data[0].uiId)
          }
        })
      })
    },
    goodsSelect () {
      this.goodsListRequest({
        pageSize: 0,
        status: 1
      })
    },
    goodsListRequest (e) {
      queryGoodsData(e).then((res) => {
        this.goodsList = res.data.list
      })
    },
    goodsListChange (e) {
      this.goodsListRequest({
        pageSize: 0,
        name: e,
        status: 1
      })
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then((res) => {
          this.containerList = res.data
        })
        .catch((rs) => {})
    },
    custPackingListRequest (e) {
      this.loading = true
      queryCustPackingList(e).then((res) => {
        this.isFirstEnd = false
        this.tableData = res.data.list
        let currentPage = this.pageNum
        this.pagination = {
          current: currentPage,
          pageSize: res.data.pageSize,
          total: res.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: (total) =>
            `共${total}条记录 第${currentPage}/${res.data.pages}页`,
          onChange: (pageNum) => {
            this.pageNum = pageNum
            let paramData = {
              ...this.form,
              pageSize: this.pageSize,
              pageNum: this.pageNum
            }
            this.custPackingListRequest(paramData)
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            let paramData = {
              ...this.form,
              pageSize: this.pageSize,
              pageNum: this.pageNum
            }
            this.custPackingListRequest(paramData)
          }
        }
        setTimeout(() => {
          this.loading = false
        }, 300)
      })
    },
    onChange (date, dateStr) {
      this.createValue = date
      this.form.startDate = dateStr[0]
      this.form.endDate = dateStr[1]
    },
    check () {
      this.pageNum = 1
      this.custPackingListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      const newColumns = [
        {
          title: '所属销售',
          dataIndex: 'seller'
        },
        {
          title: '所属部门',
          dataIndex: 'department'
        },
        {
          title: '装货日期',
          dataIndex: 'loadingTime'
        },
        {
          title: '客户名称',
          dataIndex: 'custName'
        },
        {
          title: '装箱地址',
          dataIndex: 'consignorAddress'
        },
        {
          title: '装箱联系人',
          dataIndex: 'consignor'
        },
        {
          title: '装箱联系电话',
          dataIndex: 'consignorPhone'
        },
        {
          title: '货名',
          dataIndex: 'goodsName'
        },
        {
          title: '箱型',
          dataIndex: 'containerType'
        },
        {
          title: '船公司',
          dataIndex: 'holder'
        },
        {
          title: '运输条款',
          dataIndex: 'transportTerms'
        },
        {
          title: '始发港',
          dataIndex: 'startPort'
        },
        {
          title: '目的港',
          dataIndex: 'endPort'
        },
        {
          title: '送货地址',
          dataIndex: 'consigneeAddress'
        },
        {
          title: '送货联系人',
          dataIndex: 'consignee'
        },
        {
          title: '送货联系电话',
          dataIndex: 'consigneePhone'
        },
        {
          title: '驳船船名航次',
          dataIndex: 'voyage'
        },
        {
          title: '驳船起航日期',
          dataIndex: 'departureDate'
        },
        {
          title: '海船船名航次',
          dataIndex: 'seagoingVoyage'
        },
        {
          title: '海船起航日期',
          dataIndex: 'seagoingDepartureDate'
        },
        {
          title: '公司编号',
          dataIndex: 'shipOrderCode'
        },
        {
          title: '箱号',
          dataIndex: 'containerNo'
        },
        {
          title: '封号',
          dataIndex: 'containerSealNo'
        },
        {
          title: '运单号',
          dataIndex: 'seagoingShipOrderCode'
        },
        {
          title: '抵达目的港日期',
          dataIndex: 'shipArrivalDate'
        },
        {
          title: '送货车队',
          dataIndex: 'motorcade'
        },
        {
          title: '送货日期',
          dataIndex: 'completeTime'
        },
        {
          title: '付款日期',
          dataIndex: 'writeOffDate'
        },
        {
          title: '应收客户金额',
          dataIndex: 'amount'
        },
        {
          title: '币种',
          dataIndex: 'currencyType'
        }
      ]
      commonExport('/sales/exportCustPackingList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: newColumns
      })
    },
    orderDetail (e) {
      window.open(`/orderCenter/order/detail/${e.shipOrderId}`, '_blank')
    }
  },
  mounted () {
    this.goodsListRequest({
      pageSize: 0,
      name: '',
      status: 1
    })
    this.containerListRequest({})
    Promise.all([this.initDept(deptData), this.initSellerDown()]).then(
      (result) => {
        this.custPackingListRequest({
          deptId: result[0],
          sellerId: result[1],
          dateSearchType: '1',
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
      }
    )
  }
}
</script>

<style lang="less" scoped></style>
